
<style lang='less'>
</style>
<template>
<div class="mt-10 ml-10 mr-10"> 
    <el-card>
      <div class="flex aic f16">
        <p>
          <span class="bs">子账号 / </span>
          <span class="jia">子账号列表</span>
          <span class="f14"> - 展示当前组织下的所有子账号，可修改子账号信息或删除子账号。</span>
        </p>
      </div>
  </el-card>
  </div>
  <div>
    <el-card class="ml-10 mr-10 mt-10">
   <el-table :data="tableData" stripe border style="width: 100%; margin-top:-20px;">
    <el-table-column align="center" type="index" label="序号" width="80" />
    <el-table-column align="center" prop="account" label="账号" />
    <el-table-column align="center" prop="username" label="用户名称" />
    <el-table-column align="center" prop="type" label="类型" :formatter="utils.ftype" />
    <el-table-column align="center" prop="cTime" label="创建时间" :formatter="utils.fcTime" />
    <el-table-column align="center" prop="uTime" label="更新时间"  />
    <el-table-column align="center" prop="desc" label="描述" />
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button size="large" type="primary" :icon="Edit" circle  @click="handleEdit(scope.$index, scope.row)"></el-button>
        <el-button
          size="large"
          type="danger"
          :icon="Delete"
          circle 
          @click="handleDelete(scope.$index, scope.row)"
          ></el-button
        >
      </template>
    </el-table-column>
  </el-table>
  </el-card>
  </div>
</template>
<script setup>
import { onMounted, ref,inject,reactive } from "vue";
import { ElMessage ,ElMessageBox } from 'element-plus';
import * as api from "@/api/index";
import {Delete,Edit,} from '@element-plus/icons-vue';
import { useRouter } from "vue-router";
// 获取router的实例
const router = useRouter();
//根组件提供utils对象
const utils = inject('utils');
const tableData = ref([])
const id = ref('');
let password = ref('')
let fixPassword = ref('')
//请求测试列表
const getTableData = ()=>{
  api.$accountList().then(res=>{
    console.log(res);
    tableData.value = res.data;
  })
}
onMounted(getTableData);

//修改
const handleEdit = (index,row)=>{
  password.value = tableData.value[index].password
  console.log(`output->password`,password)
  fixPassword.value = tableData.value[index].fixPassword
  console.log(`output->fixPassword`,fixPassword)
      router.push({
    path: "/account/add",
    query: {
      account: row.account,
      password: row.password,
      fixPassword: row.fixPassword,
      type: row.type,
      desc: row.desc,
      username: row.username,
      password: password.value,
      fixPassword: fixPassword.value,
    }
    });
}
//删除
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
    '确定删除?',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(() => {
    let data={
      id:row.id
    }
      api.$accountDel(data).then((res)=>{
        tableData.value.splice(index,1)
        ElMessage({
        type: 'success',
        message: '删除成功',
      })
      }) 
    })
  console.log(index, row)
}
</script>